<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>医路伴学 - 专业医学学习助手</title>
  
  <!-- Open Graph 标签 -->
  <meta property="og:title" content="医路伴学app下载" />
  <meta property="og:description" content="专业的医学学习助手，陪伴您的医学之路" />
  <meta property="og:image" content="https://sa.solacemeta.com/download/src/togetherStudy.png" />
  <meta property="og:url" content="https://sa.solacemeta.com/download/index.html" />
  
  <!-- 微信额外识别标签 -->
  <meta name="description" content="医路伴学，专业医学学习助手，陪伴您的医学之路" />
  <meta itemprop="image" content="https://sa.solacemeta.com/download/src/togetherStudy.png" />
  
  <!-- 移动端适配 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  
  <!-- 引入外部资源 -->
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <!-- 引入Vue2 (使用稳定CDN, html 版本) -->
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
  
  <!-- Tailwind 配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#3B82F6',
            secondary: '#10B981',
            accent: '#8B5CF6',
            dark: '#1E293B',
            light: '#F8FAFC'
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto { content-visibility: auto; }
      .btn-hover { @apply transform transition-all duration-300 hover:scale-105 hover:shadow-lg active:scale-95; }
      .card-effect { @apply bg-white rounded-xl shadow-md transition-all duration-300 hover:shadow-xl; }
    }
  </style>
  
  <style>
    /* 页面过渡动画 */
    .fade-in { animation: fadeIn 0.6s ease-in-out; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
    
    /* 加载动画 */
    .loader { border-top-color: #3B82F6; animation: spinner 0.8s linear infinite; }
    @keyframes spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
    
    /* 加载屏过渡效果 */
    #loader { transition: opacity 0.5s ease-out; }

    *{ margin: 0; padding: 0; }
    body{ background: #EDFFFB; }
    #app{
      background: #EDFFFB;
      display: flex;
      flex-direction: column;
      height: 100vh;
      overflow: auto;
    }
    .wechatBox{
      min-width: 263px;
      max-width: 343px;
      padding: 12px;
      background: #fff;
      border: 1px solid #00cc99;
      border-radius: 8px;
      margin: 0 auto;
    }
    .infoInner{
      display: flex;
      align-items: center;
      justify-content: flex-start;
      font-weight: 500;
      font-size: 16px;
      color: #333333;
    }
    .infoBox{ height: 22px; width: 22px; margin-right: 8px; }
    .infoInnerDes{
      font-weight: 400;
      font-size: 12px;
      color: #FF4848;
      padding-top: 8px;
    }
    .maskBox{
      position: fixed;
      height: 100vh;
      width: 100vw;
      background: rgba(0,0,0,0.3);
      backdrop-filter: blur(1px);
    }
    .mskBoxInner{
      position: absolute;
      top: 10px;
      right: 10px;
      height: 44px;
      border: 1px solid #00cc99;
      background: #fff;
      border-radius: 8px;
      padding: 0 10px;
      font-size: 12px;
      color: #333;
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .mskBoxInner:after{
      content: '';
      height: 10px;
      width: 10px;
      position: absolute;
      right: 16px;
      top: -6px;
      background: #fff;
      border-top: 1px solid #00cc99;
      border-left: 1px solid #00cc99;
      transform: rotate(45deg);
    }
    .mskBoxInnerBg{
      height: 12px;
      width: 12px;
      margin-right: 6px;
      background: #fff;
    }
  </style>
</head>

<body class="bg-gray-50 font-sans text-dark min-h-screen">
  <div id="app">
    <div class='maskBox' v-if="isWechat && maskVisible" @click='showMask'>
      <div class='mskBoxInner'>
        <img class='mskBoxInnerBg' src='https://sa.solacemeta.com/download/src/chrome.png'>
        使用默认浏览器打开
      </div>
    </div>
    <!-- 加载屏 -->
    <div id="loader" class="fixed inset-0 z-50 flex items-center justify-center bg-white" v-if="isLoading">
      <div class="loader w-12 h-12 rounded-full border-4 border-gray-200"></div>
    </div>

    <!-- 主容器 -->
    <div id="app-container" class="max-w-md mx-auto px-4 py-8 fade-in" v-else>
      <!-- 微信浏览器提示 -->
      <div id="wechat提示" v-if="isWechat">
        <div class='wechatBox'>
          <div class='infoInner'>
            <img class='infoBox' src='https://sa.solacemeta.com/download/src/info.png' alt="提示">
            <p>微信浏览器提示</p>
          </div>
          <p class='infoInnerDes'>请点击右上角图标，选择「在浏览器中打开」以下载应用</p>
        </div>
      </div>
      <!-- 应用图标和标题 -->
      <div class="text-center">
        <div class="inline-block">
          <img src="https://sa.solacemeta.com/download/src/logo.png" alt="医路伴学应用图标" style='width: 60px;height: 60px;margin: 16px 0 12px;'>
        </div>
        <h1 style="font-size: 22px;font-weight: 600;color:#333;height: 25px;line-height: 25px;">医路伴学</h1>
        <p style="font-size: 16px;font-weight: 400;color:#666;height: 20px;line-height: 20px;padding: 8px 0 0;margin-bottom: 24px;">专业医学学习助手，陪伴您的医学之路</p>
      </div>
      <!-- 已安装APP的情况 -->
      <!-- <div id="已安装" class="mb-8 text-center" v-if="isAppInstalled && !isWechat">
        <div class="card-effect p-6 mb-6">
          <i class="fa fa-check-circle text-secondary text-5xl mb-4"></i>
          <h2 class="text-xl font-bold mb-2">检测到已安装应用</h2>
          <p class="text-gray-600 mb-6">点击下方按钮直接打开医路伴学</p>
          <button id="打开APP" class="w-full bg-primary text-white py-3 px-6 rounded-lg font-medium btn-hover flex items-center justify-center" @click="openApp">
            <i class="fa fa-external-link mr-2"></i> 打开医路伴学
          </button>
        </div>
      </div> -->
      
      <!-- 未安装APP的情况 -->
      <div id="未安装" v-if="!isUnknownDevice">
        <!-- 安卓下载选项 -->
        <div id="安卓下载" style="padding: 18px 12px;border: 1px solid #00cc99;background: #ffffff;border-radius: 8px;min-width: 263px;max-width: 343px;" v-if="deviceType === 'android'">
          <div>
            <div style='display: flex;height: 40px;justify-content: flex-start;align-items: center;margin-bottom: 16px;'>
              <i class="fa fa-android" style="font-size: 30px;color: #00cc99;"></i>
              <div style='height: 40px;padding-left: 10px;'>
                <h2 style="height: 20px;line-height: 20px;color: #333;font-weight: 600;font-size: 18px;margin-bottom: 8px;">安卓版下载</h2>
                <p style='height: 14px;line-height: 14px;color: #666;font-size: 14px;'>选择您偏好的应用市场下载 {{ phoneType }}</p>
              </div>
            </div>
            <div style="display: flex;flex-wrap: wrap;justify-content: space-between;">
              <button
                v-if="phoneType === 'HuaWei'"
                style="width: 100%;height: 44px;display: flex;align-items: center;justify-content: center;color: #fff;background: #FF4848;border-radius: 8px;font-size: 14px;font-weight: 600;"
                @click="toHuaWeiHandle"
                :disabled="isAndroidLoading">
                <template v-if="isAndroidLoading">
                  <i class="fa fa-spinner fa-spin mr-2"></i> 正在打开...
                </template>
                <template v-else>
                  <img src="https://sa.solacemeta.com/download/src/huaWei.png" style='height: 20px;width: 20px;margin-right: 12px' alt="华为"/>
                  华为应用市场
                </template>
              </button>
              <button
                v-if="phoneType === 'XiaoMi'"
                style="width: 100%;height: 44px;display: flex;align-items: center;justify-content: center;color: #fff;background: #FFB063;border-radius: 8px;font-size: 14px;font-weight: 600;"
                @click="toXiaoMiHandle"
                :disabled="isAndroidLoading">
                <template v-if="isAndroidLoading">
                  <i class="fa fa-spinner fa-spin mr-2"></i> 正在打开...
                </template>
                <template v-else>
                  <img src="https://sa.solacemeta.com/download/src/xiaomi.png" style='height: 20px;width: 20px;margin-right: 12px' alt="小米"/>
                  小米应用市场
                </template>
              </button>
              <button
                v-if="phoneType === 'Honor'"
                style="width: 100%;height: 44px;display: flex;align-items: center;justify-content: center;color: #fff;background: #4e94d7;border-radius: 8px;font-size: 14px;font-weight: 600;"
                @click="toHonorHandle"
                :disabled="isAndroidLoading">
                <template v-if="isAndroidLoading">
                  <i class="fa fa-spinner fa-spin mr-2"></i> 正在打开...
                </template>
                <template v-else>
                  <img src="https://sa.solacemeta.com/download/honor.png" style='height: 26px;width: 26px;margin-right: 12px' alt="小米"/>
                  荣耀应用市场
                </template>
              </button>

              <button
                v-if="phoneType === 'Oppo'"
                style="width: 100%;height: 44px;display: flex;align-items: center;justify-content: center;color: #fff;background: #7ac98e;border-radius: 8px;font-size: 14px;font-weight: 600;"
                @click="toOppoHandle"
                :disabled="isAndroidLoading">
                <template v-if="isAndroidLoading">
                  <i class="fa fa-spinner fa-spin mr-2"></i> 正在打开...
                </template>
                <template v-else>
                  <img src="./src/oppo.png" style='height: 22px;width: 22px;margin-right: 12px' alt="Oppo"/>
                  Oppo应用市场
                </template>
              </button>
              <!-- oppo和vivo start -->
              
              <!-- <button
                v-if="phoneType === 'Vivo'"
                style="width: 100%;height: 44px;display: flex;align-items: center;justify-content: center;color: #fff;background: #58b5f9;border-radius: 8px;font-size: 14px;font-weight: 600;"
                @click="toVivoHandle"
                :disabled="isAndroidLoading">
                <template v-if="isAndroidLoading">
                  <i class="fa fa-spinner fa-spin mr-2"></i> 正在打开...
                </template>
                <template v-else>
                  <img src="./src/vivo.png" style='height: 26px;width: 26px;margin-right: 12px' alt="Vivo"/>
                  Vivo应用市场
                </template>
              </button> -->

              <!-- <button
                v-if="phoneType !== 'HuaWei' && phoneType !== 'XiaoMi'"
                style="width: 48%;height: 44px;display: flex;align-items: center;justify-content: center;color: #fff;background: #00CC99;border-radius: 8px;font-size: 14px;font-weight: 600;"
                @click="toGuanWangHandle"
                :disabled="isGuanWangLoading">
                <template v-if="isGuanWangLoading">
                  <i class="fa fa-spinner fa-spin mr-2"></i> 正在打开...
                </template>
                <template v-else>
                  <img src="https://sa.solacemeta.com/download/src/guanWang.png" style='height: 20px;width: 20px;margin-right: 12px' alt="官网"/>
                  官网下载
                </template>
              </button> -->
              <button
                v-if="phoneType !== 'HuaWei' && phoneType !== 'XiaoMi' && phoneType !== 'Honor'"
                style="width: 100%;height: 44px;display: flex;align-items: center;justify-content: center;color: #fff;background: #41A4FF;border-radius: 8px;font-size: 14px;font-weight: 600;"
                @click="toYingYongBaoHandle"
                :disabled="isAndroidLoading">
                <template v-if="isAndroidLoading">
                  <i class="fa fa-spinner fa-spin mr-2"></i> 正在打开...
                </template>
                <template v-else>
                  <img src="https://sa.solacemeta.com/download/src/yingYongBao.png" style='height: 20px;width: 20px;margin-right: 12px' alt="应用宝"/>
                  应用宝
                </template>
              </button>
            </div>
          </div>
        </div>
        
        <!-- iOS下载选项（修复了多余的 v-if） -->
        <div id="iOS下载" v-if="deviceType === 'ios'" style="padding: 18px 12px;border: 1px solid #00cc99;background: #ffffff;border-radius: 8px;min-width: 263px;max-width: 343px;">
          <div>
            <div style='display: flex;height: 40px;justify-content: flex-start;align-items: center;margin-bottom: 16px;'>
              <i class="fa fa-apple" style="font-size: 30px;color: #000;"></i>
              <div style='height: 40px;padding-left: 10px;'>
                <h2 style="height: 20px;line-height: 20px;color: #333;font-weight: 600;font-size: 18px;margin-bottom: 8px;">iOS版下载</h2>
                <p style='height: 14px;line-height: 14px;color: #666;font-size: 14px;'>前往App Store下载最新版本</p>
              </div>
            </div>
            <div style="display: flex;flex-wrap: wrap;justify-content: space-between;">
              <button
                style="width: 100%;height: 44px;display: flex;align-items: center;justify-content: center;color: #fff;background: #000;border-radius: 8px;font-size: 14px;font-weight: 600;"
                @click="toAppleHandle"
                :disabled="isAppleLoading">
                <template v-if="isAppleLoading">
                  <i class="fa fa-spinner fa-spin mr-2"></i> 正在打开...
                </template>
                <template v-else>
                  <i class="fa fa-apple mr-2"></i> 前往App Store
                </template>
              </button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 未知设备 -->
      <div id="未知设备" class="mb-8" v-if="isUnknownDevice">
        <div class="card-effect p-6 text-center">
          <i class="fa fa-question-circle text-gray-500 text-5xl mb-4"></i>
          <h2 class="text-xl font-bold mb-2">无法识别设备类型</h2>
          <p class="text-gray-600 mb-6">请手动选择您的设备类型</p>
          <div class="flex gap-4">
            <button class="flex-1 bg-green-600 text-white py-3 px-4 rounded-lg font-medium btn-hover" 
                @click="setDeviceType('android')">
              <i class="fa fa-android mr-2"></i> 安卓
            </button>
            <button class="flex-1 bg-gray-800 text-white py-3 px-4 rounded-lg font-medium btn-hover"
                @click="setDeviceType('ios')">
              <i class="fa fa-apple mr-2"></i> iOS
            </button>
          </div>
        </div>
      </div>
      
      <!-- 应用特性 -->
      <div class="mb-8">
        <h3 style="height: 22px;line-height: 22px;padding: 24px 0 16px;box-sizing: content-box;font-size: 18px;color: #333;font-weight: 600;text-align: center;">应用特性</h3>
        <div>
          <div v-for="(item, index) in teXingData" :key="index" style="min-width: 263px;max-width: 343px;display: flex;align-items: center; background: #fff;border: 1px solid #00cc99;border-radius: 8px;margin-bottom: 16px;padding: 12px;">
            <img :src="item.img" style='height: 42px;width: 42px;' :alt="item.title" />
            <div style="flex: 1; padding-left: 10px;">
              <h4 style="font-weight: 500;font-size: 18px;color: #333333;padding-bottom: 8px;">{{ item.title }}</h4>
              <p style="color: #666;font-size: 14px;font-weight: 400;">{{ item.des }}</p>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 页脚 -->
      <footer class="text-center">
        <p style="font-size: 12px;color: #999;">© 2025 医路伴学 版权所有</p>
        <p style="font-size: 12px;color: #999;">如有问题，请联系客服：luyan@solacemeta.com</p>
      </footer>
    </div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        isLoading: true,         // 控制加载屏显示
        isWechat: false,         // 是否为微信浏览器
        deviceType: 'unknown',   // 设备类型（android/ios/unknown）
        isSafari: false,  // 是否为 Safari 浏览器
        isAppInstalled: false,   // APP是否已安装
        isUnknownDevice: false,  // 是否为未知设备
        phoneType: '', // 手机品牌
        isAppleLoading: false,   // iOS 按钮 loading
        isAndroidLoading: false, // Android 按钮 loading
        isGuanWangLoading: false, //官网
        maskVisible: false,
        teXingData: [
          {
            img: 'https://sa.solacemeta.com/download/src/teXing1.png',
            title: '智能锚点复盘',
            des: '录制时标记关键步骤，复盘一键跳转，精准定位操作细节，提升复盘效率。'
          },
          {
            img: 'https://sa.solacemeta.com/download/src/teXing2.png',
            title: '多角色互动复盘',
            des: '教师点评、同伴互评、个人自查多模式，支持分享讨论，教学协作零距离。​​'
          },
          {
            img: 'https://sa.solacemeta.com/download/src/teXing3.png',
            title: '标准技能视频库',
            des: '20+执业医师标准操作视频+逐项评分卡，学练对照，备考更高效。​​'
          },
          {
            img: 'https://sa.solacemeta.com/download/src/teXing4.png',
            title: '​​智能考核分析',
            des: '考核模式自动生成成绩报告，雷达图展示能力短板，成长轨迹清晰可见。​​'
          },
          {
            img: 'https://sa.solacemeta.com/download/src/teXing5.png',
            title: '本地安全存储',
            des: '视频本地保存，保护隐私，操作便捷，碎片时间高效练习。'
          }
        ]
      },
      methods: {
        // 判断是否为 Safari 浏览器（排除 Chrome 等）
        isSafariBrowser() {
          const ua = navigator.userAgent.toLowerCase();
          // Safari 需包含 version/ 且不包含 Chrome 专属标识
          return ua.includes('safari') && 
                ua.includes('version/') && 
                !ua.includes('chrome') && 
                !ua.includes('crios') &&  // 排除 iOS 端 Chrome
                !ua.includes('edge') && 
                !ua.includes('firefox') && 
                !ua.includes('opera');
        },
        showMask() {
          this.maskVisible = false
        },
        getPhoneType() {
          const ua = navigator.userAgent.toLowerCase();
          if (/iphone|ipad|ipod/.test(ua)) return 'Apple';
          if (/huawei/.test(ua)) return 'HuaWei';
          if (/honor/.test(ua)) return 'Honor';
          if (/xiaomi|redmi/.test(ua)) return 'XiaoMi';
          if (/oppo/.test(ua)) return 'Oppo';
          if (/vivo/.test(ua)) return 'Vivo';
          if (/samsung/.test(ua)) return 'Samsung';
          if (/lenovo/.test(ua)) return 'Lenovo';
          if (/meizu/.test(ua)) return 'MeiZu';
          if (/mz/.test(ua)) return 'MeiZu';
          if (/zte/.test(ua)) return 'ZTE';
          return '未知品牌';
        },
        // 是否微信内置浏览器
        isWechatBrowser() {
          const ua = navigator.userAgent.toLowerCase();
          return ua.includes('micromessenger');
        },
        // 设备类型
        getDeviceType() {
          const ua = navigator.userAgent.toLowerCase();
          this.phoneType = this.getPhoneType()
          if (ua.includes('android')) return 'android';
          if (ua.includes('iphone') || ua.includes('ipad')) return 'ios';
          return 'unknown';
        },
        // 通用：尝试唤起 App，返回 Promise<boolean> 表示是否“很可能”唤起成功
        attemptOpenApp(scheme, timeout = 2000) {

          return new Promise((resolve) => {
            let likelyOpened = false;
            const start = Date.now();

            const onHide = () => { likelyOpened = true; };
            const cleanup = () => {
              document.removeEventListener('visibilitychange', onVisibility);
              window.removeEventListener('pagehide', onHide);
              window.removeEventListener('blur', onHide);
            };
            const onVisibility = () => {
              if (document.hidden || document.visibilityState === 'hidden') {
                onHide();
              }
            };

            document.addEventListener('visibilitychange', onVisibility, { passive: true });
            window.addEventListener('pagehide', onHide, { passive: true });
            window.addEventListener('blur', onHide, { passive: true });

            // 尝试唤起
            window.location.href = scheme;

            // 到时判定
            setTimeout(() => {
              cleanup();
              // 如果在短时间内未隐藏，认为未唤起
              resolve(likelyOpened && (Date.now() - start >= 150)); 
            }, timeout);
          });
        },
        // 已安装直接打开
        openApp() {
          if ( this.isWechat ) {
            this.maskVisible = true
            return
          }
          window.location.href = 'togetherStudyApp://';
        },
        // iOS：唤起失败则跳 App Store
        async toAppleHandle() {
          if ( this.isWechat ) {
            this.maskVisible = true
            return
          }
          if (this.isAppleLoading) return;
          this.isAppleLoading = true;
          
          if( this.isSafari ) {
            // 如果是safari浏览器
            const opened = await this.attemptOpenApp('togetherStudyApp://', 20);
            this.isAppleLoading = false;
            if (!opened) {
              window.location.href = 'https://apps.apple.com/cn/app/医路伴学/6743727989';
              setTimeout(() => {
                window.location.reload()
              }, 100);
            }
          }else {
            const opened = await this.attemptOpenApp('togetherStudyApp://', 2000);
            this.isAppleLoading = false;

            if (!opened) {
              window.location.href = 'https://apps.apple.com/cn/app/医路伴学/6743727989';
            }
          }
          
        },
        // Android：唤起失败则跳华为市场，市场失败再跳网页版
        async toHuaWeiHandle() {
          if ( this.isWechat ) {
            this.maskVisible = true
            return
          }
          if (this.isAndroidLoading) return;
          this.isAndroidLoading = true;

          const opened = await this.attemptOpenApp('togetherStudyApp://', 2000);
          this.isAndroidLoading = false;

          if (!opened) {
            // 优先调起华为应用市场
            window.location.href = 'appmarket://details?id=uni.app.uni980d296';
            // 若系统或浏览器不支持 appmarket 协议，1.5s 后兜底跳网页
            setTimeout(() => {
              // 如果真的跳走了，这个计时器一般不会执行
              try {
                // 再尝试网页详情
                window.location.href = 'https://appgallery.huawei.com/app/C114048233';
              } catch (e) {}
            }, 1500);
          }
        },
        async toXiaoMiHandle() {
          if ( this.isWechat ) {
            this.maskVisible = true
            return
          }
          if (this.isAndroidLoading) return;
          this.isAndroidLoading = true;

          const opened = await this.attemptOpenApp('togetherStudyApp://', 2000);
          this.isAndroidLoading = false;

          if (!opened) {
            // 优先调起华为应用市场
            window.location.href = 'mimarket://details?id=uni.app.uni980d296';
            // 若系统或浏览器不支持 mimarket 协议，1.5s 后兜底跳网页
            setTimeout(() => {
              // 如果真的跳走了，这个计时器一般不会执行
              try {
                // 再尝试网页详情
                window.location.href = 'https://app.mi.com/details?id=uni.app.uni980d296';
              } catch (e) {}
            }, 1500);
          }
        },
        // 荣耀应用市场
        async toHonorHandle() {
          if ( this.isWechat ) {
            this.maskVisible = true
            return
          }
          if (this.isAndroidLoading) return;
          this.isAndroidLoading = true;

          const opened = await this.attemptOpenApp('togetherStudyApp://', 2000);
          this.isAndroidLoading = false;

          if (!opened) {
            // 荣耀市场唤起协议
            window.location.href = 'appmarket://details?id=uni.app.uni980d296';

            // 若系统或浏览器不支持 appmarket 协议，1.5s 后兜底跳荣耀网页
            setTimeout(() => {
              try {
                // 荣耀市场网页地址（可根据实际 App ID 调整）
                window.location.href = 'https://appgallery.huawei.com/app/900923675';
              } catch (e) {
                console.error('跳转荣耀应用市场网页失败', e);
              }
            }, 1500);
          }
        },
        // oppo 应用市场
        async toOppoHandle() {
          if ( this.isWechat ) {
            this.maskVisible = true
            return
          }
          if (this.isAndroidLoading) return;
          this.isAndroidLoading = true;

          // 尝试唤起 App
          const opened = await this.attemptOpenApp('togetherStudyApp://', 2000);
          this.isAndroidLoading = false;

          if (!opened) {
            // OPPO 市场唤起协议
            window.location.href = 'appmarket://details?package=uni.app.uni980d296';

            // 若系统或浏览器不支持 appmarket 协议，1.5s 后兜底跳 OPPO 市场网页
            setTimeout(() => {
              try {
                // OPPO 市场网页地址（根据实际 App ID 调整）
                window.location.href = 'https://store.oppomobile.com/app/36297855';
              } catch (e) {
                console.error('跳转 OPPO 应用市场网页失败', e);
              }
            }, 1500);
          }
        },
        // vivo 应用市场
        async toVivoHandle() {
          if ( this.isWechat ) {
            this.maskVisible = true
            return
          }
          if (this.isAndroidLoading) return;
          this.isAndroidLoading = true;

          // 尝试唤起 App
          const opened = await this.attemptOpenApp('togetherStudyApp://', 2000);
          this.isAndroidLoading = false;

          if (!opened) {
            // VIVO 市场唤起协议
            window.location.href = 'appmarket://details?package=uni.app.uni980d296';

            // 若系统或浏览器不支持 appmarket 协议，1.5s 后兜底跳 VIVO 市场网页
            setTimeout(() => {
              try {
                // VIVO 市场网页地址（根据实际 App ID 调整）
                window.location.href = 'https://store.vivo.com.cn/app/900923675';
              } catch (e) {
                console.error('跳转 VIVO 应用市场网页失败', e);
              }
            }, 1500);
          }
        },
        // 官网下载
        async toGuanWangHandle() {
          if ( this.isWechat ) {
            this.maskVisible = true
            return
          }
          if (this.isGuanWangLoading) return;
          this.isGuanWangLoading = true;

          const opened = await this.attemptOpenApp('togetherStudyApp://', 2000);
          this.isGuanWangLoading = false;

          if (!opened) {
            // 优先调起华为应用市场
            window.location.href = 'https://sa.solacemeta.com/apk/index.html';
          }
        },
        async toYingYongBaoHandle() {
          if ( this.isWechat ) {
            this.maskVisible = true
            return
          }
          if (this.isAndroidLoading) return;
          this.isAndroidLoading = true;

          // 先尝试唤起App
          const opened = await this.attemptOpenApp('togetherStudyApp://', 2000);
          this.isAndroidLoading = false;

          if (!opened) {
            // 优先调起应用宝客户端
            window.location.href = 'mqqapi://appdetails?appid=1112383676'; // 这里替换为你在应用宝的 AppID

            // 若系统或浏览器不支持 mqqapi 协议，1.5s 后兜底跳网页
            setTimeout(() => {
              try {
                window.location.href = 'https://a.app.qq.com/o/simple.jsp?pkgname=uni.app.uni980d296'; // 你在应用宝的包名
              } catch (e) {
                console.error(e);
              }
            }, 1500);
          }
        },
        // 跳不同市场（保持原有接口）
        goToMarket(market) {
          if ( this.isWechat ) {
            this.maskVisible = true
            return
          }
          const urls = {
            appbao: 'market://details?id=com.togetherStudyApp.app',
            official: 'https://sa.solacemeta.com/download/togetherStudyApp.apk',
            xiaomi: 'mimarket://details?id=com.togetherStudyApp.app',
            appstore: 'https://apps.apple.com/cn/app/id1234567890'
          };
          if (urls[market]) {
            window.location.href = urls[market];
          }
        },
        // 手动设置设备类型
        setDeviceType(type) {
          this.deviceType = type;
          this.isUnknownDevice = false;
        },
        // 检测APP是否安装（保持原有逻辑）
        checkAppInstalled() {
          return new Promise((resolve) => {
            const appScheme = 'togetherStudyApp://';
            const startTime = Date.now();
            const iframe = document.createElement('iframe');
            iframe.style.display = 'none';
            iframe.src = appScheme;
            document.body.appendChild(iframe);

            setTimeout(() => {
              document.body.removeChild(iframe);
              if (Date.now() - startTime < 1000) {
                resolve(false);
              }
            }, 500);

            document.addEventListener('visibilitychange', function listener() {
              if (document.hidden) {
                resolve(true);
                document.removeEventListener('visibilitychange', listener);
              }
            });
          });
        },
        // 回到可见时，重置按钮状态（避免卡 loading）
        resetLoadingsOnVisible() {
          if (document.visibilityState === 'visible') {
            this.isAppleLoading = false;
            this.isAndroidLoading = false;
          }
        }
      },
      async mounted() {
        // 800ms后隐藏加载屏
        setTimeout(() => { this.isLoading = false; }, 800);
        this.isSafari = this.isSafariBrowser();
        // 检测浏览器类型与设备
        this.isWechat = this.isWechatBrowser();
        this.deviceType = this.getDeviceType();
        
        // 处理未知设备
        if (this.deviceType === 'unknown' && !this.isWechat) {
          this.isUnknownDevice = true;
        }
        
        // 非微信浏览器：检测APP是否安装
        if (!this.isWechat) {
          try {
            this.isAppInstalled = await this.checkAppInstalled();
          } catch (error) {
            console.error('检测APP安装状态失败:', error);
            this.isAppInstalled = false;
          }
        }

        // 页面返回/再次可见时，确保按钮恢复
        document.addEventListener('visibilitychange', this.resetLoadingsOnVisible, { passive: true });
        window.addEventListener('pageshow', this.resetLoadingsOnVisible, { passive: true });
      },
      beforeDestroy() {
        document.removeEventListener('visibilitychange', this.resetLoadingsOnVisible);
        window.removeEventListener('pageshow', this.resetLoadingsOnVisible);
      }
    });
  </script>
</body>
</html>
